<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Mensch &auml;rgere dich nicht - BIG SS2012</title>
<meta http-equiv="content-type"
	content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Web Engineering Abgabe 1" />
<meta name="keywords" content="Web Engineering Sommer 2012 Abgabe 1" />
<link rel="stylesheet" type="text/css" href="styles/basic.css" />
<link rel="stylesheet" type="text/css" href="styles/screen.css" />
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<div id="header_left">
				<h1 class="invisible">Mensch &auml;rgere dich nicht - BIG SS2012</h1>
			</div>
			<div id="header_right"></div>
		</div>
		<ul class="invisible">
			<li><a href="#invisible" accesskey="1">Navigation</a></li>
			<li><a href="#registration" accesskey="2">Registrierung</a></li>
			<li><a href="#gameinfo" accesskey="3">Spielstand</a></li>
			<li><a href="#dice" accesskey="4">W&uuml;rfel</a></li>
		</ul>
		<div id="navigation">
				<h2 class="invisible">Navigation</h2>
				<ul>
					<li><a href="#">Userdaten &auml;ndern</a></li>
					<li><a href="#">Zur&uuml;ck zur Lounge</a></li>
					<li><a href="#">Ausloggen</a></li>
				</ul>
			</div>

		<div id="content">
			<div id="gameinfo">
				<h2>Spielinformationen</h2>
				<table id="gamescore" summary="Hier wird der aktuelle Spielstand angezeigt">
					<tbody>
						<tr>
							<th>Anzahl Spieler</th>
							<td>2</td>
						</tr>
						<tr>
							<th>F&uuml;hrender</th>
							<td>mehrere</td>
						</tr>
						<tr>
							<th>Aktuelle Runde</th>
							<td>1</td>
						</tr>
						<tr>
							<th>Zeit</th>
							<td>0 min, 0 sec</td>
						</tr>
					</tbody>
				</table>
				<h2>Spieler</h2>
				<table id="playerinfo" summary="Hier werden die Mitspielerinformationen angezeigt">
					<tbody>
						<tr>
							<th>Spieler 1</th>
							<td>Super Mario</td>
						</tr>
						<tr>
							<th>Spieler 2</th>
							<td>Bowser</td>
						</tr>
						<tr>
							<th>Spieler 3</th>
							<td>Luigi</td>
						</tr>
						<tr>
							<th>Spieler 4</th>
							<td>Yoshi</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="dice">
				<h2 class="invisible">W&uuml;rfel</h2>
				<h3>Super Mario</h3>
				<img src="img/wuerfel1.png" alt="W&uuml;rfel 1"/>
			</div>
			<div id="game">
			<h2 class="invisible">Spielbrett</h2>
				<div id="player1Home">
				<h2 class="invisible">Startfeld Spieler 1</h2>
					<img src="img/field_yellow.png" alt="YellowLeftTop" title="GelbLinksOben" class="leftTop"/>
					<img src="img/field_yellow.png" alt="YellowRightTop" title="GelbRechtsOben" class="rightTop"/>
					<img src="img/field_yellow_player_yellow.png" alt="YellowLeftBottom" title="GelbLinksUnten" class="leftBottom"/>
					<img src="img/field_yellow.png" alt="YellowRightBottom" title="GelbRechtsUnten" class="rightBottom"/>
				</div>
			<div id="player2Home">
				<h2 class="invisible">Startfeld Spieler 2</h2>
					<img src="img/field_green_player_green.png" alt="GreenLeftTop" title="GruenLinksOben" class="leftTop"/>
					<img src="img/field_green.png" alt="GreenLeftBottom" title="GruenLinksUnten" class="leftBottom"/>
					<img src="img/field_green.png" alt="GreenRightTop" title="GruenRechtsOben" class="rightTop"/>
					<img src="img/field_green.png" alt="GreenRightBottom" title="GruenRechtsUnten" class="rightBottom"/>
				</div>
				<div id="player3Home">
				<h2 class="invisible">Startfeld Spieler 3</h2>
					<img src="img/field_red.png" alt="RotLeftTop" title="RotLinksOben" class="leftTop"/>
					<img src="img/field_red.png" alt="RotLeftBottom" title="RotLinksUnten" class="leftBottom"/>
					<img src="img/field_red.png" alt="RotRightTop" title="RotRechtsOben" class="rightTop"/>
					<img src="img/field_red.png" alt="RotRightBottom" title="RotRechtsUnten" class="rightBottom"/>
				</div>
				<div id="player4Home">
				<h2 class="invisible">Startfeld Spieler 3</h2>
					<img src="img/field_blue.png" alt="BlueLeftTop" title="BlauLinksOben" class="leftTop"/>
					<img src="img/field_blue.png" alt="BlueLeftBottom" title="BlauLinksUnten" class="leftBottom"/>
					<img src="img/field_blue.png" alt="BlueRightTop" title="BlauRechtsOben" class="rightTop"/>
					<img src="img/field_blue.png" alt="BlueRightBottom" title="BlauRechtsUnten" class="rightBottom"/>
				</div>
				<div id="gameboard">
					<h2 class="invisible">Zugfelder</h2>
					<ol>
					 <li id="a1"><img src="img/field_yellow.png" alt="Feld" title="Feld"/></li>
					 <li id="a2"><img src="img/field.png" alt="Feld" title="Feld"/></li> 
					 <li id="a3"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a4"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a5"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a6"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a7"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a8"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a9"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					  
					 <li id="a10"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a11"><img src="img/field_green.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a12"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a13"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a14"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a15"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a16"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a17"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a18"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a19"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a20"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a21"><img src="img/field_red.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a22"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a23"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a24"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a25"><img src="img/field_player_red.png" alt="Feld" title="Feld"/></li>
					  
					 <li id="a26"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a27"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a28"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a29"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a30"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a31"><img src="img/field_blue_player_blue.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a32"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a33"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a34"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a35"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a36"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a37"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a38"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 <li id="a39"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="a40"><img src="img/field.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="fy1"><img src="img/field_yellow.png" alt="Ziel Gelb 1" title="finish yellow 1"/></li>
					 <li id="fy2"><img src="img/field_yellow.png" alt="Ziel Gelb 1" title="finish yellow 1"/></li>
					 <li id="fy3"><img src="img/field_yellow.png" alt="Ziel Gelb 1" title="finish yellow 1"/></li>
					 <li id="fy4"><img src="img/field_yellow.png" alt="Ziel Gelb 1" title="finish yellow 1"/></li>
					 
					 <li id="fg1"><img src="img/field_green.png" alt="Feld" title="Feld"/></li>
					 <li id="fg2"><img src="img/field_green.png" alt="Feld" title="Feld"/></li>
					 <li id="fg3"><img src="img/field_green.png" alt="Feld" title="Feld"/></li>
					 <li id="fg4"><img src="img/field_green.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="fr1"><img src="img/field_red.png" alt="Feld" title="Feld"/></li>
					 <li id="fr2"><img src="img/field_red.png" alt="Feld" title="Feld"/></li>
					 <li id="fr3"><img src="img/field_red.png" alt="Feld" title="Feld"/></li>
					 <li id="fr4"><img src="img/field_red.png" alt="Feld" title="Feld"/></li>
					 
					 <li id="fb1"><img src="img/field_blue.png" alt="Feld" title="Feld"/></li>
					 <li id="fb2"><img src="img/field_blue.png" alt="Feld" title="Feld"/></li>
					 <li id="fb3"><img src="img/field_blue.png" alt="Feld" title="Feld"/></li>
					 <li id="fb4"><img src="img/field_blue.png" alt="Feld" title="Feld"/></li>
				 					 					 					 
					</ol>
				</div>
			</div>
			
		</div>
	</div>
	<div id="footer">
		<p>&copy; 2012 EWA Mensch &auml;rgere Dich nicht.</p>
	</div>

</body>
</html>